<template>
  <div class="wraaper">
    <div>
      <ul class="hot-singer">
        <li v-for="item in hotSingerList" :key="item.id">
          <router-link :to="{name:'Singer',query:{id:item.id}}">
          <div class="singer-top">
            <el-image :src="item.img1v1Url"></el-image>
          </div>
          <div class="singer-footer">
            <p>{{ item.name }}</p>
            <p>
              <span>专辑: {{ item.albumSize }}</span>
            </p>
          </div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  props: ["hotSingerList"],
  data() {
    return {};
  },
  created() {},
  computed: {},
  methods: {},
};
</script>
<style lang="less" scoped>
.wraaper {
  width: 1200px;
  min-height: 200px;
  margin: 0 auto;
  margin-bottom: 40px;
  .hot-singer {
    width: 100%;
    height: 100%;
    justify-content: space-between;
    display: flex;
    li:hover {
      .el-image {
        transform: rotateY(180deg);
      }
    }
    li {
      width: 120px;
      cursor: pointer;
      height: 170px;
      .singer-top {
        width: 120px;
        height: 120px;
        .el-image {
          width: 100%;
          height: 100%;
          border-radius: 50% 50%;
          transition: all 0.4s linear;
        }
      }
      .singer-footer {
        width: 120px;
        height: 48px;
        p {
          text-align: center;
          margin: 5px 0 5px 0;
          span {
            color: #ccc;
          }
        }
      }
    }
  }
}
</style>
